<template>
    <div>
        <el-container class="home-container">
            <el-header></el-header>
            <el-container>
                <!--                侧边栏-->
                <el-aside width="300px">
                    <el-menu
                            background-color="#001529"
                            text-color="#fff"
                            active-text-color="#0a82ff"
                            unique-opened router
                    >
                        <!--                        一级菜单-->
                        <el-submenu :index="item.id + '' " v-for="item in menulist" :key="item.id">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{item.name}}</span>
                            </template>
                            <!--                            二级菜单-->
                            <el-menu-item :index="subitem.url + ''" v-for="subitem in item.children" :key="subitem.id">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>{{subitem.name}}</span>
                                </template>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <!--                    路由占位符-->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import {menulist} from './json/menu'


    export default {
        name: "choose",
        data() {
            return {
                menulist: menulist,
            }
        },
        created() {
            // this.activePath = window.sessionStorage.getItem('activePath')
        },

        //methods中，不能写箭头函数和function，只能写简写函数
        methods: {
            //保存链接的激活状态
            // saveNavState(activePath){
            //     window.sessionStorage.setItem('activePath',activePath)
            // }




        }
        ,

        mounted() {



            //页面的this在function函数中无法使用，因为function函数中内置了this，根据就近原则，会使用函数内置this,所以无法调取到函数外面的内容，如果函数内部没有要调取的内容，就报空错误。
            /*let that=this
            function dd() {
                console.log(":::", that.menulist)
            }*/

            /*箭头函数没有内置this,所以可以直接使用函数外部的this*/


            //const 是局部常量修饰符，let是局部变量修饰符，可以修改。var是全局变量修饰符，可以修改


            /*对象转json字串*/
            // console.log(":::", JSON.stringify(this.menulist))


        }

    }
</script>

<style scoped>
    .home-container {
        height: 1000px;
    }


    .el-header {
        background-color: #002140;
    }

    .el-aside {
        background-color: #001529;
    }

    .el-main {
        background-color: #ffffff;
        padding: 0;
        margin: 0;
    }

    /*.home-container{*/
    /*    height: 1872px;*/
    /*}*/
</style>
